<template>
  <!--  :close-on-click-modal="false"-->
  <el-dialog
    :visible="this.visible"
    :title="$t('operator.addResourceBtn')"
    width="500px"
    height="50%"
    @close="cancel"
  >
    <el-tabs v-model="activeName" class="mx-4" @tab-click="handleClick">
      <!--      <el-tab-pane :label="$t('operator.license')" name="first">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-form-item :label="$t('operator.license_type')" style="margin: 20px;" prop="license">
            <el-radio-group v-model="form.radio">
              <el-radio v-for="item in licenseList" :label="item" :key="item.resType" style="margin: 10px">{{ $t('operator.' + item.resType)}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('operator.quantity')" style="margin: 20px;width: 50%" prop="quantity">
            <el-input v-model="form.quantity"></el-input>
          </el-form-item>
          <el-form-item :label="$t('operator.effectDate')" style="margin: 20px" prop="effectTimestamp">
            <el-date-picker
              v-model="form.effectTimestamp"
              type="date"
              :placeholder="$t('operator.selectEffectTip')"
              format="YYYY-MM-DD"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('operator.remark')" style="margin: 20px">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 10}"
              v-model="form.remark">
            </el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>-->
      <el-tab-pane :label="$t('operator.channel')" name="second">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-form-item
            :label="$t('operator.remainingTime')"
            style="margin: 20px"
          >
            <span
              >{{ this.remainTime }} {{ this.$t('common.time.minutes') }} /
              {{ this.remainChnl }} {{ $t('operator.remainingChnl') }}</span
            >
            &nbsp;&nbsp;
            <el-popover placement="right" width="700" trigger="click">
              <el-table :data="flyKeyData">
                <el-table-column
                  prop="resType"
                  :label="$t('operator.channel_type')"
                >
                  <template v-slot="scope">
                    <span v-if="scope.row.resType === 'TIME'" size="small">{{
                      $t('operator.res_unit_time')
                    }}</span>
                    <span v-if="scope.row.resType === 'CHNL'" size="small">{{
                      $t('operator.res_unit_chnnel')
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="resRemain"
                  :label="$t('operator.res_remain')"
                ></el-table-column>
                <el-table-column
                  prop="resEffectTime"
                  :formatter="formatDate"
                  :label="$t('operator.effectDate')"
                ></el-table-column>
                <el-table-column
                  prop="resExpireTime"
                  :formatter="formatDate"
                  :label="$t('operator.expireDate')"
                ></el-table-column>
              </el-table>
              <template #reference>
                <el-button
                  v-if="flyKeyData.length > 0"
                  type="info"
                  icon="el-icon-more-outline"
                  size="small"
                  circle
                ></el-button>
              </template>
            </el-popover>
          </el-form-item>
          <el-form-item
            :label="$t('operator.channel_type')"
            style="margin: 20px"
            prop="radio"
          >
            <el-radio-group v-model="form.radio">
              <el-radio
                v-for="item in channelList"
                :label="item"
                :key="item.resType"
                style="margin: 10px"
                >{{ $t('operator.' + item.resType) }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('operator.quantity')"
            style="margin: 20px; width: 80%"
            prop="quantity"
          >
            <el-input-number
              v-model="form.quantity"
              @blur="() => (form.quantity = form.quantity.trim())"
              show-word-limit
              clearable
            ></el-input-number>
          </el-form-item>
          <el-form-item
            :label="$t('operator.effectDate')"
            style="margin: 20px; width: 80%"
            prop="effectTimestamp"
          >
            <el-date-picker
              v-model="form.effectTimestamp"
              type="date"
              :placeholder="$t('operator.selectEffectTip')"
              format="YYYY-MM-DD"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('operator.remark')"
            style="margin: 20px; width: 80%"
          >
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 10 }"
              v-model="form.remark"
              @blur="() => (form.remark = form.remark.trim())"
              maxlength="1024"
              show-word-limit
              clearable
            >
            </el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="$t('operator.resetMapBtn')" name="three">
        <el-form
          class="center"
          :model="mapForm"
          ref="dataForm"
          label-width="120px"
        >
          <el-form-item label="Map type" style="margin: 20px; width: 80%">
            <el-select
              v-model="mapForm.mapType"
              prop="mapType"
              @change="mapSelect"
            >
              <el-option
                v-for="item in mapList"
                :key="item.mapType"
                :value="item.mapType"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="Key"
            prop="mapKey"
            style="margin: 20px; width: 80%"
          >
            <div>
              <el-tag
                size="small"
                @click="defaultKeyClick"
                style="cursor: pointer; margin-right: 10px"
              >
                {{ $t('operator.defaulTag') }}
              </el-tag>
            </div>
            <el-input
              placeholder="key"
              v-model="mapForm.mapKey"
              @blur="() => (mapForm.mapKey = mapForm.mapKey.trim())"
              maxlength="128"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="$t('operator.level')" name="fourth">
        <el-form
          class="center"
          :model="levelForm"
          ref="dataForm"
          label-width="120px"
        >
          <el-form-item
            :label="$t('operator.level')"
            style="margin: 20px; width: 80%"
            prop="levelCode"
          >
            <el-select v-model="levelForm.levelCode" clearable>
              <el-option
                v-for="item in levelList"
                :key="item.lable"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('operator.expireDate')"
            prop="expireTime"
            style="margin: 20px; width: 80%"
          >
            <el-date-picker
              v-model="levelForm.expireTime"
              type="date"
              value-format="timestamp"
              :placeholder="$t('operator.expireTimeTip')"
            >
            </el-date-picker>
            <span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('operator.leverExpireTimeTip')"
                placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="$t('operator.downloadConfig')" name="fifth">
        <el-form
          class="center"
          :model="downloadConfigForm"
          ref="downloadConfigForm"
          label-width="120px"
        >
          <el-form-item
            :label="$t('operator.toms')"
            style="margin: 20px; width: 80%"
          >
            <el-select
              v-model="downloadConfigForm.tomsDownloadTransferPath"
              clearable
            >
              <el-option
                v-for="item in tomsDownloadTransferPathList"
                :key="item"
                :value="item"
                :label="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('operator.appStore')"
            style="margin: 20px; width: 80%"
          >
            <el-select
              v-model="downloadConfigForm.appStoreDownloadTransferPath"
              clearable
            >
              <el-option
                v-for="item in appStoreDownloadTransferPathList"
                :key="item"
                :value="item"
                :label="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('operator.paramPlatform')"
            style="margin: 20px; width: 80%"
          >
            <el-select
              v-model="downloadConfigForm.paramPlatformDownloadTransferPath"
              clearable
            >
              <el-option
                v-for="item in paramPlatformDownloadTransferPathList"
                :key="item"
                :value="item"
                :label="item"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="'OA'" name="sixth">
        <el-form
          class="center"
          :model="downloadConfigForm"
          ref="downloadConfigForm"
          label-width="120px"
        >
          <div v-if="!this.customer">
            <el-empty description="">
              <el-button type="text" @click="openOaCustomer">{{
                $t('customer.clickToChoose')
              }}</el-button>
            </el-empty>
          </div>
          <div v-else>
            <el-form-item
              :label="$t('customer.customerLabel')"
              style="margin: 20px; width: 80%"
            >
              {{ customer.customerName }}
              <el-button
                type="text"
                size="small"
                @click="openOaCustomer"
                style="margin-left: 10px"
              >
                <i class="el-icon-edit" />
              </el-button>
            </el-form-item>
            <el-form-item
              :label="$t('customer.customerShortName')"
              style="margin: 20px; width: 80%"
            >
              <span>{{ customer.customerShortName }}</span>
            </el-form-item>
            <el-form-item
              :label="$t('customer.email')"
              style="margin: 20px; width: 80%"
            >
              <span>{{ customer.email }}</span>
            </el-form-item>
            <el-form-item
              :label="$t('customer.contacts')"
              style="margin: 20px; width: 80%"
            >
              <span>{{ customer.contacts }}</span>
            </el-form-item>
            <el-form-item
              :label="$t('customer.address')"
              style="margin: 20px; width: 80%"
            >
              <span>{{ customer.address }}</span>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div align="center" style="margin: 10px 0 10px 0">
      <span>
        <el-button
          v-if="isAuth('10400202.MANAGE')"
          type="danger"
          @click="cancel"
          >{{ $t('common.cancel') }}</el-button
        >
        <el-button
          v-if="isAuth('10400202.MANAGE')"
          type="primary"
          :loading="dataListLoading"
          @click="submit"
          >{{ $t('common.confirm') }}</el-button
        >
      </span>
    </div>
    <oa-customer-list
      ref="oaCustomerList"
      v-if="oaCustomerListVisible"
      @close="closeOaCustomerList"
    />
  </el-dialog>
</template>

<script>
import {
  getLicenseList,
  addLicense,
  configureMap,
  getFlyDeskRemainTime,
  operatorLevelUpdate,
  getDownloadTransferPathList,
  getOperatorDownloadTransferPath,
  addOrUpdateOperatorDownloadTransferPath,
  getOperatorOuterBindInfo,
  bindOACustomer
} from '@/api/operator'
import { getMapList } from '@/utils'
import { formatDate } from '@/utils/formatDate'
import OaCustomerList from './oa-customer-list'
import { isAuth } from '@/utils'
export default {
  components: {
    OaCustomerList
  },
  data() {
    const validateLevelcode = (rule, value, callback) => {
      if (!value || value.length < 1) {
        callback(new Error(this.$t('operator.levelcode_tip')))
      } else {
        callback()
      }
    }
    let licenseValidate = (rule, value, callback) => {
      console.log(value)
      if (!value) {
        return callback(new Error(this.$t('operator.licenseEmptyCheck')))
      } else {
        callback()
      }
    }
    let quantityValidate = (rule, value, callback) => {
      console.log(value)
      if (value <= 0) {
        return callback(new Error(this.$t('operator.quantityCheck')))
      } else {
        callback()
      }
    }
    let effectTimeValidate = (rule, value, callback) => {
      console.log(value)
      if (value <= 0) {
        return callback(new Error(this.$t('operator.effectTimeCheck')))
      } else {
        callback()
      }
    }
    return {
      flyKeyData: [
        {
          platform: 'TOMS',
          subjectId: '131',
          bizCode: 'BIZ-FLY-DESKTOP',
          bizName: '远程桌面',
          resType: 'TIME',
          resRemain: 0,
          resEffectTime: 1652752777,
          resExpireTime: 1684288777
        }
      ],
      visible: false,
      oaCustomerListVisible: false,
      dataListLoading: false,
      licenseList: [],
      channelList: [],
      tomsDownloadTransferPathList: [],
      appStoreDownloadTransferPathList: [],
      paramPlatformDownloadTransferPathList: [],
      bizCode: 'BIZ-FLY-DESKTOP',
      activeName: 'second',
      remainTime: 0,
      remainChnl: 0,
      form: {
        radio: {},
        quantity: 0,
        effectTimestamp: '',
        remark: ''
      },
      mapForm: {
        mapType: '',
        mapKey: ''
      },
      levelForm: {
        operatorId: '',
        levelCode: '',
        expireTime: null
      },
      downloadConfigForm: {
        tomsDownloadTransferPath: '',
        appStoreDownloadTransferPath: '',
        paramPlatformDownloadTransferPath: ''
      },
      customer: null,
      customerForm: {
        customerCode: ''
      },
      mapList: [],
      levelList: [],
      operator: {},
      rules: {
        license: [
          { required: true, validator: licenseValidate, trigger: 'change' }
        ],
        quantity: [
          { required: true, validator: quantityValidate, trigger: 'change' }
        ],
        effectTimestamp: [
          { required: true, validator: effectTimeValidate, trigger: 'change' }
        ],
        radio: [
          { required: true, validator: licenseValidate, trigger: 'change' }
        ],
        levelCode: [
          { required: true, trigger: 'manual', validator: validateLevelcode }
        ]
      }
    }
  },
  created() {
    this.mapList = getMapList()
    this.levelList = this.$t('operator.level_list')
    this.getLicenses()
  },
  methods: {
    formatDate(row, column, cellValue, index) {
      return formatDate(cellValue, 'YYYY-MM-DD')
    },
    defaultKeyClick() {
      if (this.mapForm.mapType === 'MAP_BOX') {
        this.mapForm.mapKey = this.mapList[0].mapKey
      } else if (this.mapForm.mapType === 'GOOGLE') {
        this.mapForm.mapKey = this.mapList[1].mapKey
      } else if (this.mapForm.mapType === 'BAIDU') {
        this.mapForm.mapKey = this.mapList[2].mapKey
      }
    },
    handleClick(tab, event) {
      if (tab.name === 'second') {
        this.bizCode = 'BIZ-FLY-DESKTOP'
      } else if (tab.name === 'first') {
        this.bizCode = 'BIZ-TOMS-LICENSE'
      } else if (tab.name === 'third') {
      }
    },
    mapSelect() {
      this.mapForm.mapKey = ''
    },
    cancel() {
      this.$emit('close')
      this.visible = false
    },
    openOaCustomer() {
      this.oaCustomerListVisible = true
      this.$nextTick(() => {
        this.$refs.oaCustomerList.init()
      })
    },
    closeOaCustomerList(customer) {
      this.customer = customer
    },
    getOaCustomer() {
      getOperatorOuterBindInfo(this.operator.operatorId)
        .then((res) => {
          this.customer = res
          // console.log(this.customer)
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    getDownloadTransferPathList() {
      getDownloadTransferPathList()
        .then((res) => {
          console.log(res)
          this.tomsDownloadTransferPathList = res.tomsDownloadTransferPath
          this.appStoreDownloadTransferPathList =
            res.appStoreDownloadTransferPath
          this.paramPlatformDownloadTransferPathList =
            res.paramPlatformDownloadTransferPath
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    getOperatorDownloadTransferPath() {
      getOperatorDownloadTransferPath(this.operator.operatorId)
        .then((res) => {
          this.downloadConfigForm.tomsDownloadTransferPath =
            res.tomsDownloadTransferPath
          this.downloadConfigForm.appStoreDownloadTransferPath =
            res.appStoreDownloadTransferPath
          this.downloadConfigForm.paramPlatformDownloadTransferPath =
            res.paramPlatformDownloadTransferPath
          // console.log(res)
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    init(operator) {
      this.operator = operator
      console.log(this.operator)
      this.visible = true
      this.mapForm.mapType = operator.mapType
      this.mapForm.mapKey = operator.mapKey
      this.levelForm.operatorId = this.operator.operatorId
      this.levelForm.levelCode = this.operator.levelCode
      this.levelForm.expireTime =
        this.operator.levelExpireTime === null
          ? null
          : this.operator.levelExpireTime * 1000
      this.dataListLoading = false
      this.getDownloadTransferPathList()
      this.getOperatorDownloadTransferPath()
      // 获取flyDesk余额
      this.flyDeskRemainTime()
      this.getOaCustomer()
    },
    getLicenses() {
      getLicenseList()
        .then((data) => {
          this.licenseList = data.slice(2)
          this.channelList = data.slice(0, 2)
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    flyDeskRemainTime() {
      console.log(this.operator)
      getFlyDeskRemainTime(this.operator.operatorId)
        .then((res) => {
          this.remainTime = res.time
          this.remainChnl = res.channel
          this.flyKeyData = res.flyKeyList
          console.log(this.flyKeyData)
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    submit() {
      console.log(this.activeName)
      if (this.activeName === 'three') {
        let operatorId = this.operator.operatorId
        this.dataListLoading = true
        configureMap(operatorId, this.mapForm)
          .then((data) => {
            this.$message({
              type: 'success',
              message: this.$t('common.success')
            })
            this.dataListLoading = false
            this.visible = false
            this.$emit('refreshDataList')
          })
          .catch((e) => {
            this.$confirmError(e)
            this.dataListLoading = false
          })
      } else if (this.activeName === 'fourth') {
        console.log(this.levelForm)
        this.dataListLoading = true
        operatorLevelUpdate(this.levelForm)
          .then((data) => {
            this.dataListLoading = false
            this.visible = false
            this.$emit('refreshDataList')
          })
          .catch((e) => {
            this.$confirmError(e)
            this.dataListLoading = false
          })
      } else if (this.activeName === 'fifth') {
        const params = {
          operatorId: this.operator.operatorId,
          tomsDownloadTransferPath:
            this.downloadConfigForm.tomsDownloadTransferPath,
          appStoreDownloadTransferPath:
            this.downloadConfigForm.appStoreDownloadTransferPath,
          paramPlatformDownloadTransferPath:
            this.downloadConfigForm.paramPlatformDownloadTransferPath
        }
        addOrUpdateOperatorDownloadTransferPath(params)
          .then((res) => {
            this.dataListLoading = false
            this.visible = false
            this.$emit('refreshDataList')
          })
          .catch((e) => {
            this.$confirmError(e)
            this.dataListLoading = false
          })
      } else if (this.activeName === 'sixth') {
        const data = new FormData()
        data.append('operatorId', this.operator.operatorId)
        data.append('customerCode', this.customer.customerCode)
        bindOACustomer(data)
          .then(() => {
            this.$message.success(this.$t('common.operate_success'))
          })
          .catch((e) => {
            this.$confirmError(e)
          })
      } else {
        let param = {
          platform: 'toms',
          subjectType: 'OPERATOR',
          subjectId: this.operator.operatorId,
          resType: this.form.radio.resType,
          resPackageCode: this.form.radio.resPackageCode,
          effectTime: this.form.effectTimestamp / 1000,
          quantity: this.form.quantity,
          totalAmount: 0,
          orderRemark: this.form.remark
        }
        if (param.resType == null || param.resPackageCode == null) {
          this.$message({
            type: 'error',
            message: this.$t('operator.licenseEmptyCheck')
          })
          return
        }
        if (param.quantity === 0) {
          this.$message({
            type: 'error',
            message: this.$t('operator.quantityCheck')
          })
          return
        }
        if (param.effectTime === 0) {
          this.$message({
            type: 'error',
            message: this.$t('operator.effectTimeCheck')
          })
          return
        }
        console.log(param)
        this.$confirm(this.$t('operator.addLicenseConfirm'), '', {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          this.dataListLoading = true
          addLicense(param, this.bizCode)
            .then((data) => {
              this.dataListLoading = false
              this.$message({
                type: 'success',
                message: this.$t('common.success')
              })
              this.cancel()
            })
            .catch((e) => {
              this.$confirmError(e)
              this.dataListLoading = false
            })
        })
      }
    },
    isAuth
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin: 10px;
}
</style>
